<!--
 * @Description:
 * @Author: //联系微信：nn7334n 搭建
 * @Date: 2023-08-16 09:16:52
 * @LastEditor: //联系微信：nn7334n 搭建
 * @LastEditTime: 2023-12-07 15:22:24
 * @Copyright: by //联系微信：nn7334n 搭建
-->


<template>
	<view class="page_content">
		<view class="head_content">
			<CustomNavbar :left="0" :title="navTitle" color="#B1BCD2"></CustomNavbar>
			<view class="lang_box">
				<view class="search" @click="jumpView('/pages/video/search')">
					<u-icon name="search" color="#B1BCD2" size="28"></u-icon>
				</view>
				<view class="lang" v-if="languageList[languageIndex]" @click="isLanguage = true">
					<text class="text">{{ languageList[languageIndex].name }}</text>
					<u-icon name="arrow-right" color="#B1BCD2" size="12" :bold="true"></u-icon>
				</view>
			</view>
			<view class="tabs_box" v-if="contentList.length">
				<u-tabs :list="contentList" :current="contentCurrent" :itemStyle="tabsItemStyle" :activeStyle="tabsActiveStyle" :inactiveStyle="tabsInactiveStyle" lineColor="#ee7f33" @change="changeContent($event, 1)" />
			</view>
			<u-picker
				:show="isLanguage" keyName="name" :columns="[languageList]" :defaultIndex="[languageIndex]"
				:cancelText="$t('text.cancel')" :confirmText="$t('text.confirm')"
				confirmColor="#EE7F33" :closeOnClickOverlay="true"
				@cancel="isLanguage = false" @close="isLanguage = false" @confirm="languageConfirm($event)">
			</u-picker>
		</view>
		<view class="main_content" v-if="contentList.length">
			<swiper style="height: 100%" :skip-hidden-item-layout="true" :current="contentCurrent" @change="changeContent($event, 2)">
				<swiper-item style="height: 100%;" v-for="(item, index) in contentList" :key="item.id">
					<scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="100" refresher-background="#13141E" :refresher-triggered="refreshStatus" @refresherrefresh="refreshHandle" @scrolltolower="bottomHandle">
						<view class="content_box">
							<view class="list">
								<view class="item item3" v-for="(lItem, lIndex) in item.list" :key="lIndex" @click="openVideoDetail(lItem.id, lItem.title, lItem.image, lItem.description)">
									<view class="img">
										<image class="image" :src="lItem.image" mode="aspectFill"></image>
									</view>
									<view class="info">
										<view class="title u-line-1">{{ lItem.title }}</view>
									</view>
								</view>
							</view>
							<view class="nodata" v-if="!item.list.length && item.status == 'nomore'">
								<u-empty mode="data" :text="$t('loading.nodata')" icon="/static/images/nodata.png" />
							</view>
							<view class="liststatus" v-else>
								<u-loadmore :status="item.status" :line="false" :loadmoreText="$t('loading.loadmore')" :loadingText="$t('loading.loading')" :nomoreText="$t('loading.nomore')" />
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
	export default {
		data() {
			return {
				global: getApp().globalData,
				tabsItemStyle: {
					height: '60rpx',
					alignItems: 'flex-start'
				},
				tabsActiveStyle: {
					color: '#ee7f33',
					fontSize: '32rpx',
					fontWeight: 'bold'
				},
				tabsInactiveStyle: {
					color: '#B1BCD2'
				},
				contentList: [],
				contentCurrent: 0,
				refreshStatus: true,
				isRefresh: false,
				languageList: [],
				languageIndex: 0,
				isLanguage: false
			}
		},
		computed: {
			...mapGetters("user", ["token", "userInfo"]),
			...mapGetters("app", ["title", "lang"]),
			navTitle() {
				return typeof this.title == 'string' ? this.title : ""
			}
		},
		watch: {
			lang(newValue, oldValue) {
				if(oldValue) this.getDefaultLang()
				else this.getLanguageType()
			}
		},
		onLoad() {
			this.lang && this.getLanguageType()
		},
		methods: {
			...mapMutations("app", ["setLang", "setCurrency"]),
			// 默认语言
			getDefaultLang() {
				this.languageList.map((item, index) => {
					if(item.value == this.lang) {
						this.languageIndex = index
						this.setCurrency(item.currency)
					}
				})
			},
			// 选择语言
			languageConfirm(e) {
				this.setLang(e.value[0].value)
				this.isLanguage = false
				this.contentList = []
				this.contentCurrent = 0
				this.getLanguageType()
			},
			// 获取语言类型
			getLanguageType() {
				this.$request('language.list').then(res => {
					if(res.code === 1) {
						const arr = res.data.map(({ id, lang_text, lang, currency }) => ({ id, name: lang_text, value: lang, currency }))
						this.languageList = arr
						this.getDefaultLang()
						this.getVideoClassify()
					}
				})
			},
			// 获取视频分类
			getVideoClassify() {
				this.$request('video.classify').then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							const data = res.data.filter(item => item.type == 'video')[0].children
							const arr = data.map(({ id, name }) => ({ id, name, list: [], page: 1, pagesize: 10, status: 'loadmore' }))
							const def = [{ id: 0, name: this.$t('text.featured'), list: [], page: 1, pagesize: 10, status: 'loadmore' }]
							this.contentList = [...def, ...arr]
							this.getVideoList()
						}
					}
				})
			},
			// 获取视频列表
			getVideoList() {
				const status = uni.getSystemInfoSync().uniPlatform
				const obj = {
					category_id: this.contentCurrent == 0 ? '' : this.contentList[this.contentCurrent].id,
					type: '',
					page: this.contentList[this.contentCurrent].page,
					pagesize: this.contentList[this.contentCurrent].pagesize,
					platform: status == 'mp-weixin' ? 2 : 1,
				}
				this.contentList[this.contentCurrent].status = 'loading'
				this.$request('video.list', obj).then(res => {
					if(res.code === 1) {
						if(res.data && res.data.length) {
							this.contentList[this.contentCurrent].list = this.contentList[this.contentCurrent].list.concat(res.data)
							this.contentList[this.contentCurrent].status = 'loadmore'
							if(res.data.length < this.contentList[this.contentCurrent].pagesize) {
								this.contentList[this.contentCurrent].status = 'nomore'
							} else {
								this.contentList[this.contentCurrent].status = 'loadmore'
							}
						} else {
							this.contentList[this.contentCurrent].page > 1 && this.contentList[this.contentCurrent].page--
							const timer = setTimeout(() => {
								this.contentList[this.contentCurrent].status = 'nomore'
								clearTimeout(timer)
							}, 500)
						}
					}
					this.refreshStatus = false
					this.isRefresh = false
				}).catch(err => {
					this.refreshStatus = false
					this.isRefresh = false
				})
			},
			// 下拉刷新
			refreshHandle() {
				this.refreshStatus = true
				if(!this.isRefresh) {
					this.isRefresh = true
					this.contentList[this.contentCurrent].page = 1
					this.contentList[this.contentCurrent].list = []
					this.getVideoList()
				}
			},
			// 触底滚动
			bottomHandle() {
				this.contentList[this.contentCurrent].page++
				this.getVideoList()
			},
			// 切换分类
			changeContent(e, i) {
				let current = i === 1 ? e.index : e.detail.current
				if(current == this.contentCurrent) return
				this.contentCurrent = current
				!this.contentList[this.contentCurrent].list.length && this.getVideoList()
			}
		}
	}
</script>

<style>
	page {
		background: #13141E;
	}
</style>
<style lang="scss" scoped>
	.page_content {
		overflow: hidden;
		
		.head_content {
			.lang_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 40rpx 30rpx 40rpx;
				
				.lang {
					height: 60rpx;
					color: #B1BCD2;
					font-size: 32rpx;
					border: 2rpx solid #b1bcd2;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 16rpx 0 20rpx;
					
					.text {
						margin-right: 20rpx;
						white-space: nowrap;
					}
				}
			}
			
			.tabs_box {
				padding: 10rpx 20rpx;
				position: relative;
			}
		}
		
		.main_content {
			overflow: hidden;
			
			.content_box {
				padding: 20rpx 40rpx 20rpx 40rpx;
				
				.list {
					display: flex;
					flex-wrap: wrap;
					
					.sitem {
						width: 100%;
						height: 516rpx;
						border-radius: 20rpx;
						overflow: hidden;
						display: flex;
						margin-bottom: 40rpx;
						
						.left {
							width: 52%;
							
							.image {
								width: 100%;
								height: 100%;
							}
						}
						
						.right {
							width: 48%;
							background: linear-gradient(0deg, rgba(35, 36, 40, 1) 0%, rgba(100, 105, 124, 1) 100%);
							padding: 30rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							color: #fff;
							
							.info {
								height: 100%;
								display: flex;
								flex-direction: column;
								
								.tbox {
									flex: 1;
								}
								
								.title {
									font-size: 32rpx;
									font-weight: 700;
								}
								
								.text {
									font-size: 24rpx;
									margin-top: 16rpx;
									color: #eee;
									line-height: 40rpx;
								}
								
								.text1 {
									flex: 1;
								}
							}
							
							.button {
								height: 70rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 28rpx;
								background: #484B52;
								border-radius: 10rpx;
								margin-top: 16rpx;
								
								&.collect {
									opacity: 0.6;
								}
								
								&.active {
									background: rgba(#000, 0.2);
								}
								
								.text {
									margin-left: 8rpx;
								}
							}
						}
					}
					
					.item {
						width: calc((100% - 50rpx) / 3);
						margin-bottom: 40rpx;
						margin-right: 25rpx;
						
						&.item1 {
							&:nth-child(10n),
							&:nth-child(10n-3),
							&:nth-child(10n-6) {
								margin-right: 0;
							}
						}
						
						&.item2 {
							&:nth-child(3n) {
								margin-right: 0;
							}
						}
						
						&.item3 {
							width: calc((100% - 40rpx) / 2);
							margin-right: 40rpx;
							
							&:nth-child(2n) {
								margin-right: 0;
							}
							
							.img {
								height: 440rpx;
								border-radius: 10rpx;
								background: #000;
							}
						}
						
						.img {
							width: 100%;
							height: 280rpx;
							border-radius: 20rpx;
							overflow: hidden;
							
							.image {
								width: 100%;
								height: 100%;
							}
						}
						
						.info {
							margin-top: 16rpx;
							
							.title {
								font-size: 28rpx;
								color: #F4F7FA;
							}
							
							.text {
								font-size: 24rpx;
								color: #666;
								margin-top: 4rpx;
							}
						}
					}
				}
				
				.nodata {
					padding: 15vh 0;
				}
			}
		}
	}
</style>